<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link href="css/bbs.css" rel="stylesheet">
</head>
<body>
<div class="bbs">
    <header><span>我要发帖</span></header>
    <section>
        <ul></ul>
    </section>
    <div class="post">
        <input class="title" placeholder="请输入标题（1-50个字符）">
        所属版块：<select><option>请选择版块</option><option>电子书籍</option><option>新课来了</option><option>新手报到</option><option>职业规划</option></select>
        <textarea class="content"></textarea>
        <input class="btn" value="发布">
    </div>
</div>
<script src="js/dev/jquery-3.4.1.js"></script>
<script>
    let head = ["img/tou01.jpg","img/tou02.jpg","img/tou03.jpg","img/tou04.jpg"];
    $(function () {
        $('header span').click(function () {
            $('.post').css({'display':'block'});
        });
        $('.btn').on('click',function () {
            let $newLi = $('<li></li>');
            let $newDiv = $('<div></div>');
            let $newImg = $('<img>');
            let $newH1 = $('<h1></h1>');
            let $newP2 = $('<p></p>');
            let $newSpan = $('<span></span>');
            let randNum = Math.floor(Math.random() * 4);
            let headImage = head[randNum];
            $newImg.attr({src:headImage,alt:'头像'});
            $newH1.html($('.title').val());
            $('select option').each(function (index,op) {
                /*console.log($(this).attr("selected"));*/
                if (this.selected){
                    /*console.log($(this).val());*/
                    $newP2.html("板块:" + $(this).val());/*"板块:" + $(this).val()*/
                }
            });
            let date = new Date();
            let year = date.getFullYear();
            let month = date.getMonth() + 1;
            let day = date.getDate();
            let hour = date.getHours();
            let minutes = date.getMinutes();
            $newSpan.html("发表时间：" + year + "-" + month + "-" + day + " " + hour + ":" + minutes);
            $newSpan.appendTo($newP2);
            $newImg.appendTo($newDiv);
            $newDiv.appendTo($newLi);
            $newH1.appendTo($newLi);
            $newP2.appendTo($newLi);
            $('ul').prepend($newLi);
            $('.post').css({'display':'none'});
            $('.title').val("");
            $('.content').val("");
            $('select option:first').attr({selected:'selected'});
        });

    });

</script>
</body>
</html>